<template>
  <div>
    <s-table ref="table" :rowKey="record => record.id" :columns="columns" :data="loadData" :showPagination="false">
      <span slot="status" slot-scope="text">{{ text | supplyStatus(status) }}</span>
      <span slot="supplyReason" slot-scope="text">{{ text | supplyReason(reason) }}</span>
      <span slot="action" slot-scope="text, record">
        <a-popconfirm title="确定撤回补货?" ok-text="Yes" cancel-text="No" @confirm="handleWithdraw(record)" @cancel="cancel">
          <a>撤回</a>
        </a-popconfirm>
      </span>
    </s-table>
  </div>
</template>
<script>
import { STable } from '../../components'
import { getBoxSupply } from '@/api/box/order'
import globalData from '@/views/box/util/global'
const columns = [
  {
    title: '补货单号',
    dataIndex: 'supplySn',
    align: 'center',
    with: '150px'
  },
  {
    title: '时间',
    dataIndex: 'createTime',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '商品数',
    dataIndex: 'supplyCount',
    align: 'center'
  },
  {
    title: '商品金额（元）',
    dataIndex: 'supplyPrice',
    align: 'center',
    customRender: text => '¥ ' + text
  },
  {
    title: '补货原因',
    dataIndex: 'supplyReason',
    align: 'center',
    scopedSlots: { customRender: 'supplyReason' }
  }
  /*   {
    title: '操作',
    dataIndex: 'action',
    key: 'amount',
    align: 'right',
    scopedSlots: { customRender: 'action' }
  } */
]
export default {
  components: {
    STable
  },
  props: {
    boxId: {
      type: String,
      default: ''
    },
    updateRecord: {
      type: Boolean,
      default: false,
      require: false
    }
  },
  data() {
    this.columns = columns
    return {
      loadData: () => this.fetchData(),
      status: [],
      reason: []
    }
  },
  watch: {
    updateRecord(val) {
      console.log(val)
      if (val) {
        this.$refs.table.refresh(true)
      }
    }
  },
  filters: {
    supplyStatus(val, status) {
      if (status.length > 0) {
        let result = status.filter(v => v.key == val.toString())
        if (result.length > 0) {
          return result[0].value
        } else {
          return val
        }
      } else {
        return val
      }
    },
    supplyReason(val, status) {
      if (val == null) {
        return ''
      }
      if (status.length > 0) {
        let result = status.filter(v => v.key == val.toString())
        if (result.length > 0) {
          return result[0].value
        } else {
          return val
        }
      } else {
        return val
      }
    }
  },
  mounted() {
    this.getStatus()
  },
  methods: {
    getStatus() {
      this.status = globalData.boxSupplyStatus
      this.reason = globalData.boxSupplyReason
    },
    fetchData() {
      let params = {
        requestData: {
          boxId: this.boxId
        }
      }
      return getBoxSupply(params).then(res => {
        if (res.code == 0) {
          // console.log(res.data)
          this.$emit('getRecordList', res.data)
          return res
        } else {
          this.$message.warning(res.msg)
          const data = {
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            },
            data: []
          }
          return data
        }
      })
    },
    handleWithdraw(record) {},
    cancel() {}
  }
}
</script>
